﻿@{
    ViewBag.Title = "EditableList";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<link rel="stylesheet" href="/JsLib/zeus/ui/zeus.ui.editlist.css" type="text/css" />

<h2>Editable List</h2>

<div class="editListBox">
    <input type="text" id="select" class="shortList" />
    <ul class="editList" id="selectList">
    </ul>
</div>

<script type="text/javascript">
    var selectList = initSelectData();
    var clickMoreCount = 1;
    var pageNum = 5;
    $(document).ready(function () {
        $(document).on('click', '#selectList li', function (e) {
            if (e.target.className == "more") {
                clickMoreCount++;
                setSelect();
            } else {
                $("#select").val(e.target.innerHTML);
                $("#selectList").html("");
            }

        });

        $("#select").bind('keyup focus', function (event) {
            //alert('selected')
            setSelect();
        });

    });

    // mock data
    function initSelectData() {
        var selectList = [];
        for (var i = 0; i < 12; i++) {
            var obj = new Object();
            obj.name = "ListItem" + i;
            selectList.push(obj);
        }

        return selectList;
    }

    function setSelect() {
        var val = $("#select").val();
        var htm = "";
        var i = 0;
        //显示的数量
        var count = clickMoreCount * pageNum;
        $.each(selectList, function (index, value) {
            var name = value.name;
            if ((!val || name.indexOf(val) == 0) && i < count) {
                htm += "<li>" + name + "</li>"
                i++;
            }
        });
        if (i == count) {
            htm += "<li class='more'>more</li>";
        }
        $("#selectList").html(htm);
    }
</script>